'use client'

import { useRequest } from "@/hooks/useRequest";
import React from "react";
import MyLoading from "./MyLoading";

export default function DataContainer<T>({ defalut, req, loadingChild, errorChild }: {
    req: () => Promise<T>,
    defalut: (data: T) => React.ReactNode,
    loadingChild?: () => React.ReactNode,
    errorChild?: (err: any) => React.ReactNode,

}) {
    const { loading, data, error } = useRequest(req);
    if (loading) {
        return (
            <div>
                {loadingChild ? loadingChild() : <MyLoading></MyLoading>}
            </div>
        );
    }
    if (error) {
        return <div className="text-center">
            {errorChild ? errorChild(error) : <div>获取数据失败</div>}
        </div>;
    }
    return <div>
        {defalut(data as T)}
    </div>;
}
// type SlotType = "default" | "empty" | "loading";
// DataContainer.Slot = ({ children }: { name: SlotType; children: React.ReactNode }) => {
//     return children;
// }